<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命记录 | 人生时光轴</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            /* 保持与主站一致的配色方案 */
            --color01: #534739;
            /* 深棕色 */
            --color02: #9E8774;
            /* 棕褐色 */
            --color03: #F0F2F1;
            /* 米白色 */
            --color04: #1F2D33;
            /* 深青色 */
            --color05: #0D0D0C;
            /* 近黑色 */

            /* 增强玻璃质感 */
            --glass: rgba(240, 242, 241, 0.75);
            --glass-border: rgba(255, 255, 255, 0.4);
            --glass-shadow: rgba(83, 71, 57, 0.2);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #F0F2F1 0%, #e8eaea 100%);
            color: var(--color01);
            min-height: 100vh;
            overflow-x: hidden;
            padding: 0;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 顶部导航栏 - 保持玻璃效果 */
        .navbar {
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            background: var(--glass);
            backdrop-filter: blur(12px) saturate(180%);
            -webkit-backdrop-filter: blur(12px) saturate(180%);
            border-radius: 0 0 20px 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px var(--glass-shadow);
            border: 1px solid var(--glass-border);
            border-top: none;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-icon {
            font-size: 28px;
            color: var(--color04);
        }

        .logo-text {
            font-size: 24px;
            font-weight: 600;
            letter-spacing: 1px;
            background: linear-gradient(45deg, var(--color05), var(--color01));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* 导航链接 */
        .nav-toggle {
            display: none;
            font-size: 24px;
            color: var(--color01);
            cursor: pointer;
        }

        .nav-links {
            display: flex;
            gap: 20px;
        }

        .nav-link {
            text-decoration: none;
            color: var(--color01);
            font-size: 16px;
            font-weight: 500;
            padding: 8px 14px;
            border-radius: 50px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-link:hover {
            background: rgba(255, 255, 255, 0.3);
            color: var(--color04);
        }

        .nav-link.active {
            background: rgba(158, 135, 116, 0.2);
            color: var(--color04);
        }

        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            background: var(--color04);
            border-radius: 50%;
        }

        .user-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .search-box {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50px;
            padding: 6px 12px;
        }

        .search-box input {
            background: transparent;
            border: none;
            outline: none;
            padding: 5px 10px;
            width: 160px;
            color: var(--color01);
            font-size: 15px;
        }

        .search-box i {
            color: var(--color02);
        }

        .user-profile {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--color02), var(--color01));
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color03);
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 12px var(--glass-shadow);
            transition: transform 0.3s ease;
        }

        .user-profile:hover {
            transform: scale(1.05);
        }

        /* 主内容区 */
        .main-content {
            margin-bottom: 40px;
        }

        .content-area {
            background: var(--glass);
            backdrop-filter: blur(12px) saturate(180%);
            -webkit-backdrop-filter: blur(12px) saturate(180%);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 32px var(--glass-shadow);
            border: 1px solid var(--glass-border);
        }

        /* 页面标题区 */
        .page-header {
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .page-title {
            font-size: 28px;
            font-weight: 600;
            color: var(--color05);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .page-title i {
            color: var(--color04);
        }

        .page-description {
            color: var(--color02);
            margin-top: 8px;
            max-width: 800px;
        }

        /* 记录表单区域 */
        .record-form {
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 30px;
        }

        @media (max-width: 992px) {
            .record-form {
                grid-template-columns: 1fr;
            }
        }

        .form-main {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .form-label {
            font-weight: 500;
            color: var(--color04);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-label i {
            font-size: 14px;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border-radius: 12px;
            border: 1px solid var(--glass-border);
            background: rgba(255, 255, 255, 0.8);
            color: var(--color01);
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--color02);
            box-shadow: 0 0 0 3px rgba(158, 135, 116, 0.2);
        }

        textarea.form-control {
            min-height: 180px;
            resize: vertical;
            line-height: 1.6;
        }

        /* 分类标签选择 */
        .categories {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 5px;
        }

        .category-tag {
            padding: 6px 14px;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.6);
            border: 1px solid var(--glass-border);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .category-tag:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateY(-2px);
        }

        .category-tag.selected {
            background: var(--color02);
            color: var(--color03);
            border-color: var(--color02);
        }

        .add-custom-category {
            padding: 6px 14px;
            border-radius: 50px;
            border: 1px dashed var(--color02);
            color: var(--color02);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .add-custom-category:hover {
            background: rgba(158, 135, 116, 0.1);
        }

        /* 多媒体上传区域 */
        .media-upload {
            background: rgba(255, 255, 255, 0.6);
            border-radius: 15px;
            padding: 20px;
            border: 1px solid var(--glass-border);
            transition: all 0.3s ease;
        }

        .media-upload:hover {
            background: rgba(255, 255, 255, 0.8);
        }

        .upload-area {
            border: 2px dashed var(--color02);
            border-radius: 12px;
            padding: 30px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        .upload-area:hover {
            border-color: var(--color01);
            background: rgba(158, 135, 116, 0.05);
        }

        .upload-icon {
            font-size: 36px;
            color: var(--color02);
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .upload-area:hover .upload-icon {
            transform: scale(1.1);
            color: var(--color01);
        }

        .upload-text {
            margin-bottom: 10px;
            color: var(--color01);
        }

        .upload-subtext {
            font-size: 14px;
            color: var(--color02);
        }

        .media-preview {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 15px;
        }

        .media-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            aspect-ratio: 1/1;
            background: rgba(0, 0, 0, 0.05);
        }

        .media-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .media-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .media-remove:hover {
            background: rgba(0, 0, 0, 0.7);
        }

        /* 右侧信息面板 */
        .info-panel {
            background: rgba(255, 255, 255, 0.6);
            border-radius: 15px;
            padding: 25px;
            border: 1px solid var(--glass-border);
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .panel-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .panel-title {
            font-weight: 600;
            color: var(--color04);
            font-size: 18px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--glass-border);
        }

        /* 情绪选择器 */
        .emotion-selector {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
        }

        .emotion-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 8px;
            border-radius: 8px;
            width: 60px;
        }

        .emotion-item:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateY(-3px);
        }

        .emotion-icon {
            font-size: 24px;
        }

        .emotion-label {
            font-size: 12px;
            text-align: center;
        }

        .emotion-item.selected {
            background: rgba(158, 135, 116, 0.1);
        }

        /* 相关人物 */
        .people-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .person-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50px;
            border: 1px solid var(--glass-border);
            font-size: 14px;
        }

        .person-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--color02), var(--color01));
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
        }

        .add-person {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 50px;
            border: 1px dashed var(--color02);
            color: var(--color02);
            font-size: 14px;
            cursor: pointer;
        }

        /* 操作按钮 */
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 20px;
        }

        .btn {
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--color02), var(--color01));
            color: var(--color03);
            box-shadow: 0 4px 12px var(--glass-shadow);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 18px rgba(83, 71, 57, 0.3);
        }

        .btn-secondary {
            background: transparent;
            color: var(--color01);
            border: 1px solid var(--color02);
        }

        .btn-secondary:hover {
            background: rgba(158, 135, 116, 0.1);
        }

        /* 最近记录预览 */
        .recent-records {
            margin-top: 40px;
        }

        .records-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .records-title {
            font-size: 22px;
            color: var(--color05);
        }

        .record-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .record-card {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 15px var(--glass-shadow);
            border: 1px solid var(--glass-border);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .record-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px var(--glass-shadow);
        }

        .record-card-image {
            height: 160px;
            width: 100%;
            object-fit: cover;
        }

        .record-card-content {
            padding: 18px;
        }

        .record-card-date {
            font-size: 13px;
            color: var(--color02);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .record-card-title {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--color05);
        }

        .record-card-excerpt {
            font-size: 14px;
            color: var(--color01);
            line-height: 1.5;
            display: -webkit-box;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .record-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            padding-top: 10px;
            border-top: 1px solid var(--glass-border);
            font-size: 13px;
        }

        .record-card-category {
            background: rgba(158, 135, 116, 0.1);
            color: var(--color02);
            padding: 3px 10px;
            border-radius: 50px;
        }

        .record-card-emotion {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--color02);
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .nav-links {
                gap: 15px;
            }

            .nav-link {
                font-size: 15px;
                padding: 6px 12px;
            }
        }

        @media (max-width: 768px) {
            .nav-toggle {
                display: block;
            }

            .nav-links {
                position: fixed;
                top: 80px;
                right: -100%;
                flex-direction: column;
                background: var(--glass);
                backdrop-filter: blur(12px) saturate(180%);
                padding: 20px;
                border-radius: 15px 0 0 15px;
                box-shadow: -5px 0 15px var(--glass-shadow);
                transition: right 0.3s ease;
                z-index: 99;
                border: 1px solid var(--glass-border);
            }

            .nav-links.active {
                right: 0;
            }

            .content-area {
                padding: 20px;
            }

            .page-title {
                font-size: 24px;
            }

            .form-actions {
                flex-wrap: wrap;
                justify-content: center;
            }

            .btn {
                flex: 1;
                min-width: 140px;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .navbar {
                padding: 12px 15px;
            }

            .logo-text {
                font-size: 20px;
            }

            .search-box {
                display: none;
            }

            .record-cards {
                grid-template-columns: 1fr;
            }

            .nav-links {
                top: 70px;
            }

            .emotion-item {
                width: 50px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 顶部导航栏 -->
        <nav class="navbar">
            <div class="logo">
                <div class="logo-icon">
                    <i class="fas fa-hourglass-half"></i>
                </div>
                <div class="logo-text">人生时光轴</div>
            </div>

            <!-- 移动端菜单按钮 -->
            <div class="nav-toggle">
                <i class="fas fa-bars"></i>
            </div>

            <div class="nav-links">
                <a href="#" class="nav-link">时光轨迹</a>
                <a href="#" class="nav-link active">生命记录</a>
                <a href="#" class="nav-link">记忆中心</a>
                <a href="#" class="nav-link">蓝图规划</a>
                <a href="#" class="nav-link">人物自传</a>
                <a href="#" class="nav-link">时空胶囊</a>
            </div>

            <div class="user-actions">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索时光记忆...">
                </div>
                <div class="user-profile">S</div>
            </div>
        </nav>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="content-area">
                <!-- 页面标题 -->
                <div class="page-header">
                    <div>
                        <h1 class="page-title">
                            <i class="fas fa-pen-fancy"></i> 生命记录
                        </h1>
                        <p class="page-description">记录生命中的重要时刻、感悟与成长，让每一段经历都被珍视和铭记</p>
                    </div>
                </div>

                <!-- 记录表单 -->
                <form class="record-form">
                    <div class="form-main">
                        <div class="form-group">
                            <label class="form-label" for="record-title">
                                <i class="fas fa-heading"></i> 记录标题
                            </label>
                            <input type="text" id="record-title" class="form-control" placeholder="给这段记忆起个标题...">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="record-date">
                                <i class="fas fa-calendar-alt"></i> 发生时间
                            </label>
                            <input type="datetime-local" id="record-date" class="form-control">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="record-location">
                                <i class="fas fa-map-marker-alt"></i> 发生地点
                            </label>
                            <input type="text" id="record-location" class="form-control" placeholder="在哪里发生的？">
                        </div>

                        <div class="form-group">
                            <label class="form-label">
                                <i class="fas fa-tags"></i> 记录分类
                            </label>
                            <div class="categories">
                                <div class="category-tag selected">
                                    <i class="fas fa-landmark"></i> 人生里程碑
                                </div>
                                <div class="category-tag">
                                    <i class="fas fa-heart"></i> 情感时刻
                                </div>
                                <div class="category-tag">
                                    <i class="fas fa-graduation-cap"></i> 学习成长
                                </div>
                                <div class="category-tag">
                                    <i class="fas fa-briefcase"></i> 职场发展
                                </div>
                                <div class="category-tag">
                                    <i class="fas fa-utensils"></i> 生活日常
                                </div>
                                <div class="category-tag">
                                    <i class="fas fa-plane"></i> 旅行足迹
                                </div>
                                <div class="add-custom-category">
                                    <i class="fas fa-plus"></i> 自定义
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="record-content">
                                <i class="fas fa-align-left"></i> 详细描述
                            </label>
                            <textarea id="record-content" class="form-control"
                                placeholder="请描述这段记忆的细节...发生了什么，你的感受如何，有什么思考和领悟..."></textarea>
                        </div>

                        <div class="form-group">
                            <label class="form-label">
                                <i class="fas fa-image"></i> 添加照片/视频
                            </label>
                            <div class="media-upload">
                                <div class="upload-area">
                                    <div class="upload-icon">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                    </div>
                                    <div class="upload-text">点击或拖拽文件到此处上传</div>
                                    <div class="upload-subtext">支持JPG、PNG、MP4格式，最多上传10个文件</div>
                                    <input type="file" multiple style="display: none;" id="media-input">
                                </div>

                                <div class="media-preview">
                                    <!-- 上传的媒体文件预览将显示在这里 -->
                                </div>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="button" class="btn btn-secondary">
                                <i class="fas fa-save"></i> 保存草稿
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-check"></i> 保存记录
                            </button>
                        </div>
                    </div>

                    <div class="info-panel">
                        <div class="panel-section">
                            <h3 class="panel-title">
                                <i class="fas fa-smile"></i> 当时的情绪
                            </h3>
                            <div class="emotion-selector">
                                <div class="emotion-item selected">
                                    <div class="emotion-icon">
                                        <i class="fas fa-grin-beam" style="color: #FFD700;"></i>
                                    </div>
                                    <div class="emotion-label">喜悦</div>
                                </div>
                                <div class="emotion-item">
                                    <div class="emotion-icon">
                                        <i class="fas fa-surprise" style="color: #FFA500;"></i>
                                    </div>
                                    <div class="emotion-label">惊喜</div>
                                </div>
                                <div class="emotion-item">
                                    <div class="emotion-icon">
                                        <i class="fas fa-heart" style="color: #FF6347;"></i>
                                    </div>
                                    <div class="emotion-label">感动</div>
                                </div>
                                <div class="emotion-item">
                                    <div class="emotion-icon">
                                        <i class="fas fa-meh" style="color: #808080;"></i>
                                    </div>
                                    <div class="emotion-label">平静</div>
                                </div>
                                <div class="emotion-item">
                                    <div class="emotion-icon">
                                        <i class="fas fa-frown" style="color: #6A5ACD;"></i>
                                    </div>
                                    <div class="emotion-label">忧伤</div>
                                </div>
                                <div class="emotion-item">
                                    <div class="emotion-icon">
                                        <i class="fas fa-flushed" style="color: #FF4500;"></i>
                                    </div>
                                    <div class="emotion-label">感慨</div>
                                </div>
                            </div>
                        </div>

                        <div class="panel-section">
                            <h3 class="panel-title">
                                <i class="fas fa-users"></i> 相关人物
                            </h3>
                            <div class="people-list">
                                <div class="person-item">
                                    <div class="person-avatar">爸</div>
                                    <div class="person-name">父亲</div>
                                    <i class="fas fa-times"
                                        style="color: var(--color02); cursor: pointer; font-size: 12px;"></i>
                                </div>
                                <div class="person-item">
                                    <div class="person-avatar">妈</div>
                                    <div class="person-name">母亲</div>
                                    <i class="fas fa-times"
                                        style="color: var(--color02); cursor: pointer; font-size: 12px;"></i>
                                </div>
                                <div class="add-person">
                                    <i class="fas fa-plus"></i> 添加人物
                                </div>
                            </div>
                        </div>

                        <div class="panel-section">
                            <h3 class="panel-title">
                                <i class="fas fa-cloud-sun"></i> 环境备注
                            </h3>
                            <input type="text" class="form-control" placeholder="天气、场景氛围等">
                        </div>

                        <div class="panel-section">
                            <h3 class="panel-title">
                                <i class="fas fa-lock"></i> 隐私设置
                            </h3>
                            <select class="form-control">
                                <option value="private">仅自己可见</option>
                                <option value="family">仅家人可见</option>
                                <option value="friends">仅朋友可见</option>
                                <option value="public">公开分享</option>
                            </select>
                        </div>

                        <div class="panel-section">
                            <h3 class="panel-title">
                                <i class="fas fa-capsules"></i> 时光胶囊
                            </h3>
                            <select class="form-control">
                                <option value="none">不设置</option>
                                <option value="1y">1年后提醒查看</option>
                                <option value="3y">3年后提醒查看</option>
                                <option value="5y">5年后提醒查看</option>
                                <option value="10y">10年后提醒查看</option>
                                <option value="custom">自定义时间</option>
                            </select>
                            <p style="font-size: 13px; color: var(--color02); margin-top: 5px;">设置后，系统将在指定时间提醒您回顾这段记忆
                            </p>
                        </div>
                    </div>
                </form>

                <!-- 最近记录预览 -->
                <div class="recent-records">
                    <div class="records-header">
                        <h2 class="records-title">最近的记录</h2>
                        <a href="#" class="view-all">查看全部 <i class="fas fa-arrow-right"></i></a>
                    </div>

                    <div class="record-cards">
                        <div class="record-card">
                            <img src="https://picsum.photos/seed/family/400/300" alt="家庭聚餐照片" class="record-card-image">
                            <div class="record-card-content">
                                <div class="record-card-date">
                                    <i class="far fa-calendar"></i> 2023年10月15日
                                </div>
                                <h3 class="record-card-title">家庭聚餐庆祝项目完成</h3>
                                <p class="record-card-excerpt">项目上线后，全家一起聚餐庆祝，父母为我感到骄傲，这是最幸福的时刻...</p>
                                <div class="record-card-footer">
                                    <div class="record-card-category">人生里程碑</div>
                                    <div class="record-card-emotion">
                                        <i class="fas fa-grin-beam"></i> 喜悦
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="record-card">
                            <img src="https://picsum.photos/seed/midautumn/400/300" alt="中秋月亮照片"
                                class="record-card-image">
                            <div class="record-card-content">
                                <div class="record-card-date">
                                    <i class="far fa-calendar"></i> 2023年9月28日
                                </div>
                                <h3 class="record-card-title">与家人共度中秋</h3>
                                <p class="record-card-excerpt">在老家与父母一起度过了温馨的中秋节，分享了人生时光轴的概念，他们非常喜欢...</p>
                                <div class="record-card-footer">
                                    <div class="record-card-category">情感时刻</div>
                                    <div class="record-card-emotion">
                                        <i class="fas fa-heart"></i> 感动
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="record-card">
                            <img src="https://picsum.photos/seed/westlake/400/300" alt="西湖风景照片"
                                class="record-card-image">
                            <div class="record-card-content">
                                <div class="record-card-date">
                                    <i class="far fa-calendar"></i> 2023年8月10日
                                </div>
                                <h3 class="record-card-title">西湖旅行感悟</h3>
                                <p class="record-card-excerpt">独自一人在西湖边漫步，思考人生方向，决定开始这个记录人生的项目...</p>
                                <div class="record-card-footer">
                                    <div class="record-card-category">旅行足迹</div>
                                    <div class="record-card-emotion">
                                        <i class="fas fa-flushed"></i> 感慨
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 移动端导航菜单切换
        const navToggle = document.querySelector('.nav-toggle');
        const navLinks = document.querySelector('.nav-links');

        navToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });

        // 导航链接激活状态切换
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelectorAll('.nav-link').forEach(el => {
                    el.classList.remove('active');
                });
                this.classList.add('active');

                // 移动端点击后关闭菜单
                if (window.innerWidth <= 768) {
                    navLinks.classList.remove('active');
                }
            });
        });

        // 分类标签选择
        document.querySelectorAll('.category-tag').forEach(tag => {
            tag.addEventListener('click', function () {
                this.classList.toggle('selected');
            });
        });

        // 情绪选择
        document.querySelectorAll('.emotion-item').forEach(item => {
            item.addEventListener('click', function () {
                document.querySelectorAll('.emotion-item').forEach(el => {
                    el.classList.remove('selected');
                });
                this.classList.add('selected');
            });
        });

        // 媒体上传区域交互
        const uploadArea = document.querySelector('.upload-area');
        const mediaInput = document.getElementById('media-input');
        const mediaPreview = document.querySelector('.media-preview');

        uploadArea.addEventListener('click', () => {
            mediaInput.click();
        });

        // 处理拖拽上传
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--color01').trim();
            uploadArea.style.background = 'rgba(158, 135, 116, 0.1)';
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--color02').trim();
            uploadArea.style.background = 'transparent';
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--color02').trim();
            uploadArea.style.background = 'transparent';

            if (e.dataTransfer.files.length) {
                handleFiles(e.dataTransfer.files);
            }
        });

        // 处理文件选择
        mediaInput.addEventListener('change', () => {
            handleFiles(mediaInput.files);
        });

        // 处理上传的文件
        function handleFiles(files) {
            for (let i = 0; i < files.length; i++) {
                // 只处理图片和视频
                if (!files[i].type.match('image.*') && !files[i].type.match('video.*')) {
                    continue;
                }

                const reader = new FileReader();

                reader.onload = function (e) {
                    const mediaItem = document.createElement('div');
                    mediaItem.className = 'media-item';

                    if (files[i].type.match('image.*')) {
                        mediaItem.innerHTML = `
                            <img src="${e.target.result}" alt="上传的图片">
                            <div class="media-remove">
                                <i class="fas fa-times"></i>
                            </div>
                        `;
                    } else if (files[i].type.match('video.*')) {
                        mediaItem.innerHTML = `
                            <video src="${e.target.result}" controls></video>
                            <div class="media-remove">
                                <i class="fas fa-times"></i>
                            </div>
                        `;
                    }

                    mediaPreview.appendChild(mediaItem);

                    // 添加删除功能
                    mediaItem.querySelector('.media-remove').addEventListener('click', () => {
                        mediaItem.remove();
                    });
                }

                if (files[i].type.match('image.*')) {
                    reader.readAsDataURL(files[i]);
                } else if (files[i].type.match('video.*')) {
                    reader.readAsDataURL(files[i]);
                }
            }
        }

        // 添加新人物
        document.querySelector('.add-person').addEventListener('click', () => {
            const personName = prompt('请输入人物名称:');
            if (personName && personName.trim() !== '') {
                const peopleList = document.querySelector('.people-list');
                const initial = personName.charAt(0);

                const personItem = document.createElement('div');
                personItem.className = 'person-item';
                personItem.innerHTML = `
                    <div class="person-avatar">${initial}</div>
                    <div class="person-name">${personName}</div>
                    <i class="fas fa-times" style="color: var(--color02); cursor: pointer; font-size: 12px;"></i>
                `;

                // 插入到"添加人物"按钮前面
                peopleList.insertBefore(personItem, document.querySelector('.add-person'));

                // 添加删除功能
                personItem.querySelector('.fa-times').addEventListener('click', () => {
                    personItem.remove();
                });
            }
        });

        // 表单提交处理
        document.querySelector('form').addEventListener('submit', (e) => {
            e.preventDefault();

            // 这里可以添加表单验证和数据提交逻辑
            alert('记录已保存成功！');
        });
    </script>
</body>

</html>